<template>
	<view>
		<u-navbar title="我的" :is-back="false" titleColor="#fff" :background="background"></u-navbar>
		<view class="u-flex user-box u-p-30">
			<view class="u-m-r-10">
				<u-avatar :src="avater" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" @click="setting">
				<!-- <view class="u-font-18 u-p-b-20">{{nickName}}</view> -->
				<view class="u-font-14 u-tips-color">昵称：{{nickName}}</view>
				<view class="u-font-14 u-tips-color">永久积分：{{permanentScore}}</view>
				<view class="u-font-14 u-tips-color">赠送积分：{{score}}</view>
			</view>
			<view class="u-m-l-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-button type="warning" @click="showAd">看广告赚积分({{adCount}}/15)</u-button>
				<button open-type="bindcontact">客服服务</button>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="order" :iconStyle="iconStyle" title="积分消耗记录"
					@click="toUrl('/pages/mine/scorelog')"></u-cell-item>
				<u-cell-item icon="order" :iconStyle="iconStyle" title="AI绘图生成记录"
					@click="toUrl('/pages/mine/myDrawing')"></u-cell-item>
				<u-cell-item icon="order" :iconStyle="iconStyle" title="上传图片" @click="toUrl('/pages/index/addPicture')"
					v-show="showUploadImage"></u-cell-item>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: this.TopColor,
				iconStyle: {
					color: '#9fccff'
				},
				avater: "",
				nickName: "",
				phoneNumber: "",
				score: "0",
				adCount: 0,
				permanentScore: "0",
				showUploadImage: false,
				videoAd: null, //在页面中定义激励视频广告
				// enableShowAd: false,
				timeout: 0
			}
		},
		onLoad() {
			// 在页面onLoad回调事件中创建激励视频广告实例
			let _this = this
			if (wx.createRewardedVideoAd) {
				this.videoAd = wx.createRewardedVideoAd({
					adUnitId: '你自己的微信广告id'
				})
				this.videoAd.onLoad(() => {
					// this.enableShowAd = true
					console.log("广告加载成功")
				})
				this.videoAd.onError((err) => {
					console.log("广告加载失败")
					_this.$common.errorToShow("广告加载失败，请稍后再试！")
				})
				this.videoAd.onClose((res) => {
					console.log("广告关闭")
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						_this.addScore()
						//定时任务
						_this.timeoutTask = setInterval(() => {
							if (_this.timeout == 0) {
								// _this.enableShowAd = true;
								clearInterval(_this.timeoutTask)
							} else {
								_this.timeout -= 1;
							}
						}, 1000)
						console.log("广告看完了")
					} else {
						this.timeout = 0;
						// 播放中途退出，不下发游戏奖励
						console.log("广告没有看完")
					}
				})
			}
		},
		onShow() {
			// this.enableShowAd = true //可以点击广告
			this.getUserInfo()
		},
		methods: {
			async addScore() {
				//加成功之后
				let addScorePermise = await this.$http.get("/user/addScoreForAd", {
					score: 8,
					permanentScore: 2
				})
				let addScore = await addScorePermise;
				if (addScore.success && addScore.data) {
					//积分完成
					this.permanentScore += 2 //永久积分加2
					this.score += 8 //临时积分加8
					this.adCount += 1
					this.timeout = 30
				} else {
					this.$common.errorToShow("积分新增失败")
				}

			},
			showAd() {
				let _this = this
				if (this.adCount == 15) {
					this.$common.errorToShow("看广告次数用完了，请明天再来")
					return
				}
				if (this.timeout != 0) {
					this.$common.errorToShow("请在" + this.timeout + "秒之后在看广告")
					return
				}
				// 用户触发广告后，显示激励视频广告
				if (this.videoAd) {
					this.videoAd.show().catch(() => {
						// 失败重试
						this.videoAd.load()
							.then(() => {
								videoAd.show()
								// _this.enableShowAd = false
							})
							.catch(err => {
								console.log('激励视频 广告显示失败')
							})
					})
				}else{
					this.$common.errorToShow("广告加载失败，请退出小程序稍后再试")
				}
			},
			toUrl(url) {

				this.$common.navigateTo(url)

			},
			setting() {
				const userInfo = this.$db.userInfo()
				if (userInfo) {
					this.$common.navigateTo('/pages/mine/setting')
				} else {
					this.$common.jumpToLogin()
				}
			},
			//页面加载获取用户信息
			async getUserInfo() {
				const userInfo = this.$db.userInfo();
				console.log("我的页面查询的用户信息 userInfo = ", userInfo)
				if (userInfo) {
					this.avater = userInfo.avatar;
					this.nickName = userInfo.nickName;
					this.phoneNumber = userInfo.phoneNumber;
					//查询积分
					const userInfoScorePromise = await this.$http.get('/user/getUserByPhoneNumber')
					const userInfoScore = await userInfoScorePromise;
					console.log("查询用户信息", userInfoScore)
					if (userInfoScore.data.role.includes('1')) {
						console.log("this.showUploadImage", this.showUploadImage)
						this.showUploadImage = true;
					} else {
						this.showUploadImage = false;
					}
					this.score = userInfoScore.data.score;
					this.adCount = userInfoScore.data.adCount
					this.permanentScore = userInfoScore.data.permanentScore
				} else {
					//获取不到登录消息 跳转到登录页面
					this.$common.jumpToLogin()
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.pupbox {
		height: 320rpx;
		background-image: linear-gradient(#2BC3C8, #84E7B9);

		.box-icon {
			padding: 60rpx 30rpx 10rpx;
		}
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.class-none {
		border: none;
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		outline: none;
	}

	.class-none::after {
		outline: none;
		border: none;
	}
</style>